<template>
  <div id="boxBind">
    <!-- the Nvar -->
    <van-sticky>
      <van-nav-bar title="医废袋信息" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div class="boxbind-content">
      <!-- scan med waste box -->
      <div class="scan-box">
        <div>
          <span>医废箱识别码</span>
          <span>YLS120486565226</span>
        </div>
        <div>
          <span>医废箱类型</span>
          <span>感染性废物</span>
        </div>
      </div>

      <!--the history bind -->
      <div class="his-bind">
        <div class="his-bind-title">
          医废袋信息
        </div>
        <div
          class="his-bind-content"
          v-for="(item, index) in infoList"
          :key="index"
        >
          <div class="the-content-div">
            <div class="list-div">
              <span>医废袋编号:</span>
              <span>{{ item.boxIdentify }}</span>
            </div>
            <div class="list-div">
              <span>废物类型:</span>
              <span>{{ item.boxKinds }}</span>
            </div>
            <div class="list-div">
              <span>废物重量:</span>
              <span>{{ item.boxWeight }}</span>
            </div>
            <div class="list-div">
              <span>废物详情：</span>
              <span>查看记录表<i class="iconfont icon-icon-test"></i></span>
            </div>
            <el-divider></el-divider>
            <label>
              <el-button type="text">删除</el-button>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BagsBinds",
  data() {
    return {
      infoList: [
        {
          boxIdentify: "YFD25566866",
          boxKinds: "感染性废物",
          boxWeight: "30kg",
        },
        {
          boxIdentify: "YFD25566866",
          boxKinds: "感染性废物",
          boxWeight: "54kg",
        },
        {
          boxIdentify: "YFD25566866",
          boxKinds: "感染性废物",
          boxWeight: "54kg",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: "/boxBind/boxBindInfo",
      });
    },
    toRouter() {
      this.$router.push({
        path: "/boxBind/bagsBind",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.boxbind-content {
  padding: 10px;
  color: #666;
  font-size: 15px;
  background-color: #f2f2f2;
  .scan-box {
    width: 100%;
    height: 80px;
    background-color: #ffffff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    & div {
      display: flex;
      padding: 5px 10px;
      justify-content: space-between;
      & span:nth-child(2) {
        color: #333333;
      }
    }
  }
  .his-bind {
    margin-top: 10px;
    .his-bind-title {
      align-items: center;
      font-size: 14px;
      padding: 0 10px;
    }
    .his-bind-content {
      height: 210px;
      margin-top: 10px;
      border-radius: 10px;
      padding: 10px;
      background-color: #ffffff;
      .the-content-div {
        height: 200px;
        border-radius: 8px;
        padding: 5px;
        background-color: #f6f8fe;
        & .list-div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
          & span:nth-child(2) {
            color: #333333;
          }
        }
        & label {
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
    }
  }
}
#boxBind .el-divider--horizontal {
  margin: 20px 0 10px 0;
}
</style>
